import React from 'react';
import {Redirect, Route} from "react-router-dom";

// 渲染当前组件（注意：写法 （） => {}  如果返回对象需要用() 包裹）
export const RouteWithSubRoutes = route => (
    // https://www.jianshu.com/p/66d6cb474532
    <Route
        path={route.path}
        exact={route.exact}
        render={props => {
            var isAuthenticated  = sessionStorage.getItem('isAuthenticated');
            // 需要验证身份并且未登录情况下
            if ( !(typeof route.meta === 'object' && route.meta.isAuth) && !isAuthenticated ) {
                console.log("需要验证身份并且未登录情况下");
                return (
                    <Redirect
                        to={{
                            pathname: "/login",
                            state: { from: props.location }
                        }}
                    />
                )
            }
            console.log("直接进入"+ {...props});
            return (
                route.Redirect ? (<Redirect to={route.Redirect}/>) :
                    (<route.component {...props} routes={route.routes}/>)
            )
        }}
    />
);

// 循环渲染当前路由数组中一维数组中的组件
export const RenderRoutes = ({routes}) => {
    // TODO: 此处有疑问，为什么用{routes}.map()
    // console.log(routes);
    // console.log({routes});
    return (
        routes.map((route, i) =>
            <RouteWithSubRoutes key={i} {...route}/>
        )
    )
}

